<template>
	<view class="list">
		<view class="topCom">
			<!-- 返回 -->
			<NAVC title="订单列表"></NAVC>
			<!-- 选项卡 -->
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" :style="styles" activeColor="#ffffff"></uni-segmented-control>
		</view>
		<!-- 内容 -->
		<view class="cont">
			<!-- 卡片 -->
			<ListLi
				v-for="item in data"
				:key="item.id"
				:id="item.id"
				:state="item.orderType"
				:title="item.productName"
				:tag="item.tag"
				:price="item.orderPrice"
				:num="item.count"
			></ListLi>
			<!-- 加载更多 -->
			<uni-load-more iconType="auto" :status="status" :contentText="{ contentdown: '上拉显示更多', contentrefresh: '正在加载...', contentnomore: '没有更多数据了' }" />
			<!-- <view class="empty" v-if="empty">
				列表到底部咯~
			</view>
			<view class="empty" v-if="network">
				请检查你的网络是否正常~
			</view> -->
		</view>
	</view>
</template>

<script lang="ts" setup>
import NAVC from '@/components/equipmentC/navC/index.vue';
import ListLi from '@/components/orderList/index.vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { getList } from '@/api/hostingCenter';
import { ref } from 'vue';
const loadNum = ref(1);
const current = ref(0);
const styles = ref([
	{
		value: 'button',
		text: '按钮',
		checked: true
	},
	{
		value: 'text',
		text: '文字'
	}
]);
const items = ref(['全部', '待付款', '待发货', '已发货', '交易完成']);
const status = ref<'more' | 'loading' | 'no-more'>('more');
async function onClickItem(e) {
	if (current.value != e.currentIndex) {
		current.value = e.currentIndex;
		loadNum.value = 0;
		const res = await getList({
			pageSize: 10,
			pageNum: loadNum.value,
			status: current.value
		});
		if (typeof res === 'object' && !Array.isArray(res) && res) {
			if (res.rows && Array.isArray(res.rows)) {
				data.value = res.rows;
				if (res.rows.length === 0) {
					// 合并当前数据与最新数据
					status.value = 'no-more';
				}
			}
		}
	}
	// console.log(current.value)
}
// 列表数据变量
// const data = ref<OrderSuccess[]>()
const data = ref();
onLoad(async (option) => {
	status.value = 'more';
	if (option) {
		current.value = parseInt(option.num); // 要数字类型
	}
	// console.log(current.value,option.num)
	const res = await getList({
		pageSize: 10,
		pageNum: loadNum.value,
		status: current.value
	});
	// count  productName orderPrice
	try {
		if (typeof res === 'object' && !Array.isArray(res) && res) {
			if (res.rows && Array.isArray(res.rows)) {
				data.value = res.rows;
				if (res.rows.length === 0) {
					// 合并当前数据与最新数据
					status.value = 'no-more';
				}
			}
		}
	} catch (e) {
		setTimeout(() => {
			status.value = 'no-more';
		}, 1000);
	}
});
// 判断有无数据时
const empty = ref(false);
// 上拉加载的获取更多的数据
onReachBottom(async () => {
	// console.log(44444444)
	status.value = 'loading'; // noMore
	// //加载下一页
	loadNum.value++;
	// //发送请求下一页的数据
	const add = await getList({
		pageSize: 10,
		pageNum: loadNum.value,
		status: current.value
	});
	console.log(add);
	// // 判断是否还有更多数据
	if (typeof add === 'object' && !Array.isArray(add) && add) {
		if (add.rows && Array.isArray(add.rows)) {
			if (add.rows.length > 0) {
				// 合并当前数据与最新数据
				data.value = data.value?.concat(add.rows);
			} else {
				status.value = 'no-more';
			}
		}
	}
});
// // 下拉加载的动画
// const loading = ref(false);
// const onRefresh = async () => {
// 	try {
// 		// 回到初始数据
// 		pageNumber.value = 1
// 		// 请求回初始数据
// 		const list = await getList({ status: active.value })
// 		// 赋值给data变量
// 		if (list.code === 200) {
// 			loading.value = false;
// 			data.value = list.rows
// 			// 给下面的提示无数据的变量设置为true
// 			// network.value = true
// 		} else {
// 			loading.value = true
// 			data.value = []
// 			// 给下面的提示无数据的变量设置为true
// 			network.value = true
// 		}
// 	} catch (ex) {
// 		empty.value = false
// 		// 处理网络中断或请求失败的情况
// 		if (ex instanceof TypeError && ex.message.includes('Network request failed')) {
// 			console.error('请求失败：网络中断');
// 		} else {
// 			console.error('发生异常：', ex);
// 		}
// 	}
// };
</script>

<style lang="scss" scoped>
@import '@/common.scss';

.topCom {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}

::v-deep .segmented-control {
	position: relative;
	height: 88px;
	background-color: #000;
}

::v-deep .segmented-control__text {
	font-size: 32px;
	font-family: PingFangSC, PingFang SC;
	color: #ffffff !important;
	line-height: 45px;
	opacity: 0.6;
}

::v-deep .segmented-control__item--text {
	// border-color: #4E47FF;
	border-width: 0px;
	font-weight: 600;
	opacity: 1;

	&::before {
		content: '';
		display: block;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 40px;
		height: 6px;
		background: #4e47ff;
		border-radius: 3px;
	}
}

.cont {
	padding-top: 190px;
	background-color: rgba(0, 0, 0, 0.9);
}

.list {
	min-height: 100vh;
	background-color: $background;
}

.empty {
	display: flex;
	justify-content: center;
	height: 60px;
	align-items: center;
	font-size: 30px;
	color: #b3b3b3;
}
</style>
